<script setup lang="ts">
import {
  Document,
} from '@element-plus/icons-vue'

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<template>
    <!-- 两栏布局 -->
    <div class="container">
      <div class="left_nav">
        <el-row class="tac tab_bc">
          <el-col :span="30">
            <h5 class="mb-2 title_name">Dash UI</h5>
            <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              default-active="2"
              text-color="#fff"
              @open="handleOpen"
              @close="handleClose"
            >
              <el-menu-item index="1">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home nav-icon icon-xs me-2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                <span class="span_style">Dashboard</span>
              </el-menu-item>
              <el-menu-item index="2" disabled>
                <span>Layouts & Pages</span>
              </el-menu-item>
              <el-sub-menu index="3">
                <template #title>
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers nav-icon icon-xs me-2"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
                  <span class="span_style">navPages</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="1-1">Profile</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group>
                  <el-menu-item index="1-2">Settings</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group>
                  <el-menu-item index="1-3">Billing</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group>
                  <el-menu-item index="1-4"> Pricing</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group>
                  <el-menu-item index="1-5"> 404 Error</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
              <el-sub-menu index="4">
                <template #title>
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-lock nav-icon icon-xs me-2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
                  <span class="span_style">Authentication</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="1-1">Sign In</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group>
                  <el-menu-item index="1-2">Sign Up</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group>
                  <el-menu-item index="1-3">Forget Password</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
              <el-menu-item index="5">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sidebar nav-icon icon-xs me-2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg>
                <span class="span_style">Navigator Two</span>
              </el-menu-item>
              <el-menu-item index="6" disabled>
                <el-icon><document /></el-icon>
                <span>UI Components</span>
              </el-menu-item>
              <el-menu-item index="7">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-package nav-icon icon-xs me-2"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                <span class="span_style">Navigator Four</span>
              </el-menu-item>
              <el-sub-menu index="8">
                <template #title>
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-left-down nav-icon icon-xs me-2"><polyline points="14 15 9 20 4 15"></polyline><path d="M20 4h-7a4 4 0 0 0-4 4v12"></path></svg>
                  <span class="span_style">Menu Level</span>
                </template>
                <el-sub-menu index="1-1">
                  <template #title>Two Level</template>
                  <el-menu-item index="1-1-1">NavItem 1</el-menu-item>
                  <el-menu-item index="1-1-2">NavItem 2</el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="1-2">
                  <template #title>Three Level</template>
                  <el-sub-menu index="1-2-1">
                    <template #title>NavItem 1</template>
                    <el-menu-item index="1-2-1-1">NavChild Item 1</el-menu-item>
                </el-sub-menu>
                  <el-menu-item index="1-2-2">Nav Item 2</el-menu-item>
                </el-sub-menu>
              </el-sub-menu>
              <el-menu-item index="9" disabled>
                <el-icon><document /></el-icon>
                <span>Documentation</span>
              </el-menu-item>
              <el-menu-item index="10">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard nav-icon icon-xs me-2"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
                <span class="span_style">Docs</span>
              </el-menu-item>
              <el-menu-item index="11">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-git-pull-request nav-icon icon-xs me-2"><circle cx="18" cy="18" r="3"></circle><circle cx="6" cy="6" r="3"></circle><path d="M13 6h3a2 2 0 0 1 2 2v7"></path><line x1="6" y1="9" x2="6" y2="21"></line></svg>
                <span class="span_style">Changelog</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </div>
      <div class="right_nav">右侧导航
      </div>
    </div>
  
</template>

<style scoped>
    .container {
      display:flex;
    };
    .left_nav {
      width:auto;
      height:1000px;
      background:red;
    }
    .right_nav {
      flex: 1;
      /* background:green; */
    }
    .tab_bc {
      background: #545c64;
      /* font-size: 28px; */
    }
    .title_name {
      font-size:20px;
      color:white;
      margin:20px 30px;
    }
    .span_style {
      margin: 7px;
    }
</style>